/**
 * Created by yyl on 2018/11/21.
 * 自定义 多选框
 */
import React from 'react';
import { Icon } from 'antd';
import PropTypes from "prop-types"

export default class Picker extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: props.data,
            value: props.defaultValue,
        };
    }

    static propTypes={
        data:PropTypes.shape({
            value: PropTypes.oneOfType([PropTypes.bool,PropTypes.string,PropTypes.number]),
            label: PropTypes.string,
        }),
        defaultValue: PropTypes.oneOfType([PropTypes.bool,PropTypes.string,PropTypes.number]),
        onValueChange: PropTypes.func,
        disabled: PropTypes.bool,
    }

    static defaultProps = {
        disabled: false
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data,
            value: nextProps.defaultValue
        })
    }

    onClick=(value,index)=>{
        let { onValueChange, disabled } = this.props;
        if(disabled)return;
        this.setState({ value })
        onValueChange && onValueChange(value,index)
    }

    render() {
        let { value, data} = this.state;
        let { disabled } = this.props;

        return (
            <div className="checkbox-ul">
                <ul>
                    {data.map((item,index)=>
                        <li onClick={()=>this.onClick(item.value,index)}  key={index} className={item.value == value ? `checkbox-li checked ${disabled?"disabled": ""}` : `checkbox-li ${disabled?"disabled": ""}`}>
                            {item.label && (item.label).length > 10 ? (item.label).substr(0, 10).concat('…') : item.label}
                        <span className="icon-span">
                            <Icon type="check" />
                        </span>
                    </li>)}
                </ul>
            </div>
        )
    }
}